<template>

	<view class="container">
		<view class="pageContent">
<!-- 			<view class="referrerBox" style="font-weight: bolder;">
				<view class="imageBox">
					头像
				</view>
				<view>
					姓名
				</view>
				<view>
					电话
				</view>
				<view>微信号</view>
			</view> -->
			<!-- 陪玩列表 -->
			<view class="referrerBox referrerValueBox"  v-for="(item,index) in playerList"
				:key="index">
				<view>
					<view class="imageBox">
						<image :src="item.album[0]"></image>
					</view>
					<view>
						昵称：{{item.nick}}
					</view>
					<view>
						电话： {{item.mobile}}
					</view>
					<view v-if="item.wx_num">
						微信号： {{item.wx_num}}
					</view>
					<view>
						当前分润占比:{{item.propotion}}%
					</view>
					<view style="font-size: 30rpx;padding: 20rpx 0;color: #FA97B4;" @tap="changeProportion(item)">
						修改分润
					</view>
				</view>
			</view>
			<view class="referrerBox referrerValueBox" v-if="playerList.length<1">
					暂无更多陪玩，赶紧去邀请吧！
			</view>
		</view>
		
		<view class="operationBox"  :class="[isShowOperatePage==0?'operationBoxInitDisplay':isShowOperatePage==2?'operationBoxShow':'operationBoxHide']" >
			操作窗口
		</view>
		
		<!-- 修改分润进度条 -->
		<view class="modalWrapper" v-if="showModal">
			<view class="modalWrapper_content">
				<view class="modalWrapper_title">
					<view></view>
					<view style="color: #504f4f;font-size: 18px;font-weight: 600;">修改分润比例</view>
					<view class="iconfont icon-guanbi" style="position: absolute;right: 0%;" @tap="showModal=false">
					</view>
				</view>
				<view class="modalWrapper_main">
					<view class="modalWrapper_agreement">
						<view>
							{{updateProportion.details}} 当前分润占比 {{updateProportion.propotion}}%
						</view>
						<view  style="display: flex;margin: 20rpx 0;">
							修改比例至：<input type="number" v-model="newProportion" style="width: 150rpx;border: 1px solid #b7b3b3;margin: 0 10px;border-radius: 15rpx;" />%
						</view>
					</view>
					<view class="modalWrapper_btn">
						<view class="modalWrapper_funBtn modalWrapper_funBtn_calcel" @tap="showModal=false">取消</view>
						<view class="modalWrapper_funBtn modalWrapper_funBtn_confirm" @tap="confirm()">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModal: false,
				openid: "",
				familyList: [],
				showList: [],
				targetReferreData: {},
				isChangeProfit: false, 
				isShowOperatePage: 0 ,  //0为初始值 1为显示 2为隐藏
				playerList:[],
				updateProportion:{
					// nickname:"张三",
					// proportion:10
				},
				newProportion:""
			}
		},
		onLoad() {
			this.getPlayerList()
		},
		methods: {
			async confirm(){
				let err=""
				
				if(this.newProportion==""){
					err="请输入您要修改的分润比例"
				}
				
				if(err){
					uni.showToast({
						title:err,
						icon:'none'
					})
					return
				}
				
				console.log("要提交的id为"+this.updateProportion.id)
				console.log("要提交的比例为"+this.newProportion)
				const res= await this.$http("/appapi/member/set_propotion",{
					uid:this.updateProportion.id,
					propotion:this.newProportion
				})
				//console.log(res.msg)
				uni.showToast({
					title:res.msg,
					icon:"success"
				})
				this.showModal=false
				this.updateProportion={}
				this.newProportion=""
				this.getPlayerList()
			},
			//修改分润列表唤醒
			changeProportion(item){
				console.log(item)
				this.updateProportion=item
				this.showModal=true
			},
			async getPlayerList(){
				const {data} = await this.$http('/appapi/member/livelist');
				// console.log(data.data)
				this.playerList=data
			}
		}
	}
</script>

<style lang="less" scoped>
	
	.referrerBox {
		width: 90%;
		margin: auto;
		line-height: 2;
		display: flex;
		justify-content: space-around;
		border-bottom: 1rpx solid #93A1A1;
		/* padding: 20rpx 0; */
		view{
			flex: 1;
			font-size: 35rpx;
		}
	}
	
	.referrerBox view {
		/* border: 1rpx solid; */
		overflow: hidden;
		white-space: nowrap;
		// text-overflow: ellipsis;
	}
	
	.imageBox {
		width: 120rpx;
		height: 120rpx;
	}
	
	.imageBox image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	
	.referrerBox view {
		// width: 220rpx;
	}
	
	.referrerValueBox {
		// padding: 10rpx;
	}
	.referrerValueBox view{
		flex: 1;
	}
	
	.operationBox {
		width: 500rpx;
		height: 800rpx;
		background-color: #93A1A1;
		position: fixed;
		top: 20%;
		border-radius: 40rpx;
		padding: 10rpx;
		color: white;
		box-shadow:0 0 15rpx #93A1A1 ;
	}
	.operationBoxInitDisplay{
		left: -70%
	}
	.operationBoxShow{
		animation:boxShow 0.3s linear ;
		animation-fill-mode: forwards;
	}
	.operationBoxHide{
		animation:boxHide 0.3s linear ;
		animation-fill-mode: forwards;
	}
	@keyframes boxShow{
	  0%{ left: 15%;}
	  100%{left: -70%}
	}
	@keyframes boxHide{
	  0%{ left: -70%;}
	  100%{left: 15%}
	}
	.userInfoBox {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
	}
	.userInfoBox input {
		text-align: right;
	
		width: 150rpx;
	}
	.profitBox {
		display: flex;
	}
	.buttonWrapper {
		display: flex;
		justify-content: space-around;
	}
	
	.modalWrapper {
		width: 100vw;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100vh;
		z-index: 200;
		left: 0;
		display: flex;
		box-sizing: border-box;
	}
	
	.modalWrapper_content {
		width: 82%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		// min-height: 60vh;
		margin: auto;
	}
	
	.modalWrapper_text {
		padding: 30rpx 0;
		color: #686868;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		gap: 20rpx;
	}
	.modalWrapper_agreement {
		padding: 20rpx 0;
		overflow-y: scroll;
		margin: 30rpx 0;
	}
	
	.modalWrapper_btn {
		display: flex;
		justify-content: space-between;
	}
	
	.modalWrapper_funBtn {
		width: 200rpx;
		border-radius: 25rpx;
		text-align: center;
		font-size: 25rpx;
		padding: 10rpx;
	}
	
	.modalWrapper_funBtn_calcel {
		border: 1px solid #ECECEC;
		color: #9A9A9A;
	}
	
	.modalWrapper_funBtn_confirm {
		// border: 1px solid #ECECEC;
		color: #fff;
		background-color: #FA97B4;
	}
	
	.modalWrapper_title {
		text-align: center;
		display: flex;
		position: relative;
		margin: 15rpx 0;
		justify-content: center;
	}
</style>
